<!doctype html><html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=x-ua-compatible content="IE=edge,chrome=1">
<title>制作SVG地图轮廓 - Taxodium</title>
<meta name=renderer content="webkit">
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1">
<meta http-equiv=cache-control content="no-transform">
<meta http-equiv=cache-control content="no-siteapp">
<meta name=theme-color content="#f8f5ec">
<meta name=msapplication-navbutton-color content="#f8f5ec">
<meta name=apple-mobile-web-app-capable content="yes">
<meta name=apple-mobile-web-app-status-bar-style content="#f8f5ec">
<meta name=author content="Spike Leung"><meta name=description content="&#34;&#34;"><meta name=keywords content="[]">
<meta name=generator content="Hugo 0.88.1 with theme even">
<link rel=canonical href=http://localhost:1313/taxodium/post/make-svg-map-outline/>
<link rel=apple-touch-icon sizes=180x180 href=/taxodium/apple-touch-icon.png>
<link rel=icon type=image/png sizes=32x32 href=/taxodium/favicon-32x32.png>
<link rel=icon type=image/png sizes=16x16 href=/taxodium/favicon-16x16.png>
<link rel=manifest href=/taxodium/manifest.json>
<link rel=mask-icon href=/taxodium/safari-pinned-tab.svg color=#5bbad5>
<script async src=//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js></script>
<link href=/taxodium/sass/main.min.f92fd13721ddf72129410fd8250e73152cc6f2438082b6c0208dc24ee7c13fc4.css rel=stylesheet>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin=anonymous>
<meta property="og:title" content="制作SVG地图轮廓">
<meta property="og:description" content="&#34;&#34;">
<meta property="og:type" content="article">
<meta property="og:url" content="http://localhost:1313/taxodium/post/make-svg-map-outline/"><meta property="article:section" content="post">
<meta property="article:published_time" content="2021-08-14T22:30:59+08:00">
<meta property="article:modified_time" content="2021-09-13T09:46:52+08:00">
<meta itemprop=name content="制作SVG地图轮廓">
<meta itemprop=description content="&#34;&#34;"><meta itemprop=datePublished content="2021-08-14T22:30:59+08:00">
<meta itemprop=dateModified content="2021-09-13T09:46:52+08:00">
<meta itemprop=wordCount content="827">
<meta itemprop=keywords content="svg,"><meta name=twitter:card content="summary">
<meta name=twitter:title content="制作SVG地图轮廓">
<meta name=twitter:description content="&#34;&#34;"><!--[if lte IE 9]><script src=https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js></script><![endif]--><!--[if lt IE 9]><script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script><![endif]-->
</head>
<body>
<div id=mobile-navbar class=mobile-navbar>
<div class=mobile-header-logo>
<a href=/taxodium/ class=logo>Taxodium</a>
</div>
<div class=mobile-navbar-icon>
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav id=mobile-menu class="mobile-menu slideout-menu">
<ul class=mobile-menu-list>
<a href=/taxodium/>
<li class=mobile-menu-item>Home</li>
</a><a href=/taxodium/post/>
<li class=mobile-menu-item>Archives</li>
</a><a href=/taxodium/tags/>
<li class=mobile-menu-item>Tags</li>
</a><a href=/taxodium/categories/>
<li class=mobile-menu-item>Categories</li>
</a><a href=/taxodium/about/>
<li class=mobile-menu-item>About</li>
</a>
</ul>
</nav>
<div class=container id=mobile-panel>
<header id=header class=header>
<div class=logo-wrapper>
<a href=/taxodium/ class=logo>Taxodium</a>
</div>
<nav class=site-navbar>
<ul id=menu class=menu>
<li class=menu-item>
<a class=menu-item-link href=/taxodium/>Home</a>
</li><li class=menu-item>
<a class=menu-item-link href=/taxodium/post/>Archives</a>
</li><li class=menu-item>
<a class=menu-item-link href=/taxodium/tags/>Tags</a>
</li><li class=menu-item>
<a class=menu-item-link href=/taxodium/categories/>Categories</a>
</li><li class=menu-item>
<a class=menu-item-link href=/taxodium/about/>About</a>
</li>
</ul>
</nav>
</header>
<main id=main class=main>
<div class=content-wrapper>
<div id=content class=content>
<article class=post>
<header class=post-header>
<h1 class=post-title>制作SVG地图轮廓</h1>
<div class=post-meta>
<span class=post-time> 2021-08-14 </span>
<div class=post-category>
<a href=/taxodium/categories/%E5%AE%9E%E8%B7%B5%E6%80%BB%E7%BB%93/> 实践总结 </a>
</div>
<span class=more-meta> 827 words </span>
<span class=more-meta> 2 mins read </span>
<span id=busuanzi_container_page_pv class=more-meta> <span id=busuanzi_value_page_pv><img src=/taxodium/img/spinner.svg alt=spinner.svg></span> times read </span>
</div>
</header>
<div class=post-toc id=post-toc>
<h2 class=post-toc-title>Contents</h2>
<div class="post-toc-content always-active">
<nav id=TableOfContents>
<ul>
<li><a href=#headline-1>前言</a>
</li>
<li><a href=#headline-2>获取 GIS 数据</a>
</li>
<li><a href=#headline-3>截取需要的地图轮廓</a>
</li>
<li><a href=#headline-4>简化地图</a>
</li>
<li><a href=#headline-5>导出时增加信息</a>
</li>
<li><a href=#headline-6>参考链接</a>
</li>
</ul>
</nav>
</div>
</div>
<div class=post-content>
<div id=outline-container-headline-1 class=outline-2>
<h2 id=headline-1>
前言
</h2>
<div id=outline-text-headline-1 class=outline-text-2>
<p>
由于项目基于 AmMap，有时需要使用中国某些省份或者市区作为地图，但是 AmMap 没有提供相关的地图数据，官网提供了一个自制地图数据的文档，
根据此文档，只要有地图的 GIS 数据，就可以制作出想要的地图。</p>
</div>
</div>
<div id=outline-container-headline-2 class=outline-2>
<h2 id=headline-2>
获取 GIS 数据
</h2>
<div id=outline-text-headline-2 class=outline-text-2>
<p>
网上搜索下载相关地区的 GIS 数据，一般下载下来会包含 <code>.shp</code> , <code>.shx</code>, <code>.prj</code>, <code>.dbf</code> 等类型的文件， 这里提供一份<a href=https://www.ganghe.net/research/data/china-gis-data>中国地图的 GIS 数据</a>。</p>
</div>
</div>
<div id=outline-container-headline-3 class=outline-2>
<h2 id=headline-3>
截取需要的地图轮廓
</h2>
<div id=outline-text-headline-3 class=outline-text-2>
<p>
获取轮廓，可以使用这个工具 <a href=https://github.com/mbloch/mapshaper>mapshaper</a>, 具体步骤如下:</p>
<ol>
<li>
<p>把 GIS 数据导入到 <code>mapshaper</code> 中，如果是下载了上文的中国地图 GIS 数据，里面包含了 <code>1</code> ， <code>2</code> ， <code>3</code> 不同精度的地图，根据需要的精度导入，
笔者开发的时候，需要淄博市的轮廓，于是就导入等级 <code>3</code> 的地图数据</p>
</li>
<li>
<p>打开 console，通过命令获得需要的轮廓</p>
<ul>
<li>
<p><code>filter 'NAME_1 == "Shandong" && NAME_2 == "Zibo" && NAME_3 != "Gaoqing" || NAME_3 == "Zouping"'</code> 过滤得到淄博的轮廓</p>
</li>
<li>
<p><code>mapshaper -clean</code> 清除淄博以外的区域</p>
</li>
<li>
<p>由于不需要轮廓里面的线，只需要最外面那层轮廓，将里面的线移除:</p>
<ul>
<li>
<p><code>mapshaper -dissolve</code></p>
</li>
<li>
<p><code>mapshaper -clean</code></p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p>导出成 SVG 数据，到此已经得到一个淄博地图轮廓的 SVG 了</p>
</li>
<li>
<p>由于要在 AmMap 里用，使用 AmMap 提供的<a href=http://extra.amcharts.com/mapparser3/>工具</a>， 获取 JSON 数据，这里获取的 JSON 数据就能用于 AmMap 了</p>
<ul>
<li>
<p>打开导出的 SVG 文件，复制里面 <code>&lt;g></code> 标签的全部内容</p>
</li>
<li>
<p>导入到 <a href=http://extra.amcharts.com/mapparser3/>mapparser3</a>，获取到 JSON 数据</p>
</li>
</ul>
</li>
</ol>
</div>
</div>
<div id=outline-container-headline-4 class=outline-2>
<h2 id=headline-4>
简化地图
</h2>
<div id=outline-text-headline-4 class=outline-text-2>
<p>如果下载的地图数据很精细，导出时可能会导出一个非常大的文件，但是太大的文件又可能不好处理，
这时，可以利用 mapshaper 的 <code>Simplify</code> 的功能去简化地图，从而导出一个大小合适的地图。</p>
</div>
</div>
<div id=outline-container-headline-5 class=outline-2>
<h2 id=headline-5>
导出时增加信息
</h2>
<div id=outline-text-headline-5 class=outline-text-2>
<p>一般 GIS 数据里包含了很多地图区域的信息，例如，东莞市这个区域，包含了这块区域是什么市，属于什么省份等信息，
但是当导出 SVG 的时候，发现这些信息丢失了。可以通过在导出的时候，指定要包含的属性，这样导出的SVG就能够包含
相关的属性信息了。简单的用法：</p>
<ul>
<li>
<p>在 mapshaper 的右上角又一个 <code>i</code> 的按钮，点开此按钮有一个 <code>data</code> 选项，选择此选项后，悬浮在地图区域的时候
就能看到此区域的相关属性信息</p>
</li>
<li>
<p>例如属性信息当中有一个 <code>id</code> 属性，那么当点击右上角 <code>Export</code> 的时候，在弹窗中有一个可以输入 <code>export options</code>
的输入框，可以输入 <code>-o svg-data=id</code>, 然后导出，导出的 SVG 中就会包含一个 <code>data-id</code> 的属性值。</p>
</li>
</ul>
</div>
</div>
<div id=outline-container-headline-6 class=outline-2>
<h2 id=headline-6>
参考链接
</h2>
<div id=outline-text-headline-6 class=outline-text-2>
<ul>
<li>
<p><a href=https://www.amcharts.com/docs/v3/tutorials/creating-custom-maps-for-javascript-ammap/>Creating custom maps for JavaScript amMap(AmMap3)</a></p>
</li>
<li>
<p><a href=https://www.amcharts.com/docs/v4/tutorials/creating-custom-maps/>Creating custom maps(AmMap4)</a></p>
</li>
<li>
<p><a href=https://www.ganghe.net/research/data/china-gis-data>中国 GIS 数据</a></p>
</li>
<li>
<p><a href=https://github.com/mbloch/mapshaper>mapshaper</a></p>
</li>
<li>
<p><a href=http://extra.amcharts.com/mapparser3/>amMap parser</a></p>
</li>
<li>
<p><a href=https://github.com/mbloch/mapshaper/issues/199>Additional attribute for SVG output #199</a></p>
</li>
</ul>
</div>
</div>
</div>
<div class=post-copyright>
<p class=copyright-item>
<span class=item-title>Author</span>
<span class=item-content>Spike Leung</span>
</p>
<p class=copyright-item>
<span class=item-title>LastMod</span>
<span class=item-content>
2021-09-13
<a href=https://github.com/Spike-Leung/taxodium/commit/c46287c750d66abf831afdc6dd4d1872ccf27225 title="refactor: change blog categories">(c46287c)</a>
</span>
</p>
<p class=copyright-item>
<span class=item-title>License</span>
<span class=item-content><a rel="license noopener" href=https://creativecommons.org/licenses/by-nc-nd/4.0/ target=_blank>CC BY-NC-ND 4.0</a></span>
</p>
</div>
<footer class=post-footer>
<div class=post-tags>
<a href=/taxodium/tags/svg/>svg</a>
</div>
<nav class=post-nav>
<a class=prev href=/taxodium/post/make-country-flag-icon/>
<i class="iconfont icon-left"></i>
<span class="prev-text nav-default">根据国家显示国旗图标</span>
<span class="prev-text nav-mobile">Prev</span>
</a>
</nav>
</footer>
</article>
</div>
<script src=https://utteranc.es/client.js repo=Spike-Leung/taxodium issue-term=pathname theme=github-light crossorigin=anonymous async></script>
<noscript>Please enable JavaScript to view the <a href=https://github.com/utterance>comments powered by utterances.</a></noscript>
</div>
</main>
<footer id=footer class=footer>
<div class=social-links>
<a href=mailto:l-yanlei@hotmail.com class="iconfont icon-email" title=email></a>
<a href=https://github.com/Spike-Leung class="iconfont icon-github" title=github></a>
<a href=http://localhost:1313/taxodium/index.xml type=application/rss+xml class="iconfont icon-rss" title=rss></a>
</div>
<div class=copyright>
<span class=power-by>
Powered by <a class=hexo-link href=https://gohugo.io>Hugo</a>
</span>
<span class=division>|</span>
<span class=theme-info>
Theme -
<a class=theme-link href=https://github.com/olOwOlo/hugo-theme-even>Even</a>
</span>
<div class=busuanzi-footer>
<span id=busuanzi_container_site_pv> site pv: <span id=busuanzi_value_site_pv><img src=/taxodium/img/spinner.svg alt=spinner.svg></span> </span>
<span class=division>|</span>
<span id=busuanzi_container_site_uv> site uv: <span id=busuanzi_value_site_uv><img src=/taxodium/img/spinner.svg alt=spinner.svg></span> </span>
</div>
<span class=copyright-year>
&copy;
2017 -
2021<span class=heart><i class="iconfont icon-heart"></i></span><span>Spike Leung</span>
</span>
</div>
</footer>
<div class=back-to-top id=back-to-top>
<i class="iconfont icon-up"></i>
</div>
</div>
<script src=https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin=anonymous></script>
<script src=https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin=anonymous></script>
<script src=https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin=anonymous></script>
<script src=https://cdn.jsdelivr.net/npm/timeago.js@3.0.2/dist/timeago.min.js integrity="sha256-jwCP0NAdCBloaIWTWHmW4i3snUNMHUNO+jr9rYd2iOI=" crossorigin=anonymous></script>
<script src=https://cdn.jsdelivr.net/npm/timeago.js@3.0.2/dist/timeago.locales.min.js integrity="sha256-ZwofwC1Lf/faQCzN7nZtfijVV6hSwxjQMwXL4gn9qU8=" crossorigin=anonymous></script>
<script>var languageCode="en".replace(/-/g,'_').replace(/_(.*)/,function(b,a){return b.replace(a,a.toUpperCase())});timeago().render(document.querySelectorAll('.timeago'),languageCode),timeago.cancel()</script>
<script type=text/javascript src=/taxodium/js/main.min.c99b103c33d1539acf3025e1913697534542c4a5aa5af0ccc20475ed2863603b.js></script>
<script id=baidu_push>(function(){var a,c,b;if(window.location.hostname==='localhost')return;a=document.createElement('script'),a.async=!0,c=window.location.protocol.split(':')[0],c==='https'?a.src='https://zz.bdstatic.com/linksubmit/push.js':a.src='http://push.zhanzhang.baidu.com/push.js',b=document.getElementsByTagName("script")[0],b.parentNode.insertBefore(a,b)})()</script>
</body>
</html>